<template>
    <div>
        <el-dialog title="修改密码" :visible.sync="dialogTableVisible">
            <el-form :rules="rules" ref="changePsw" :model="ruleForm" class="demo-ruleForm">
                <el-form-item label="原密码" label-width="80px" prop="userPwd">
                    <el-input v-model="ruleForm.userPwd">
                    </el-input>
                </el-form-item>
                <el-form-item label="新密码" label-width="80px" prop="newPwd">
                    <el-input v-model="ruleForm.newPwd">
                    </el-input>
                </el-form-item>
                <el-form-item label="重复密码" label-width="80px" prop="newPwd2">
                    <el-input v-model="ruleForm.newPwd2">
                    </el-input>
                </el-form-item>
            </el-form>


            <div class="botter">
                <el-button>取消</el-button>
                <el-button type="primary" @click="sub">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import { _doChangePassWord } from "../api/toos"
export default {
    data() {
        return {
            dialogTableVisible: false,
            ruleForm: {
                userPwd: "",
                newPwd: "",
                newPwd2: "",
            },
            rules: {
                userPwd: [
                    { required: true, message: '必须输入原密码！', trigger: 'blur' },
                    // { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                newPwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                newPwd2: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        async sub() {
            this.$refs.changePsw.validate(async valid => {
                if (valid) {
                    const res = await _doChangePassWord(this.ruleForm.userPwd, this.ruleForm.newPwd)
                    console.log(res)
                    if (res.data.success) {
                        this.$message.success("密码修改成功,登录失效，正在跳转登录界面...")
                        this.$router.push("/login")
                    }
                    if (res.data.err) {
                        this.$message.warning(res.data.err)
                        this.dialogTableVisible = false
                    }
                }
            })
        }
    },
    mounted() {
        this.$eventBus.$off("openChangePsw")
        var that = this
        this.$eventBus.$on("openChangePsw", function (data) {
            that.dialogTableVisible = data
        })
    }
}
</script>
    
<style lang="less" scoped>
.botter {
    display: flex;
    justify-content: right;
}
</style>